<template>
  <div class="article-read-out relative-full">
    <vue-scroll>
      <div class="article-read-wrapper">
        <div class="article-read" style="max-width: 1024px;margin: 0 auto">
          <template v-if="!loading">
            <h1 style="margin-top: 0;">{{ article.title }}</h1>
            <div class="f-y-center">
              <img class="wh34 circle-h" :src="article.user[0].avatar" alt="avatar">
              <span class="ml-5"
                    style="font-family:coolveticaregular;font-size:14px;color: #2e333a">{{
                  article.user[0].userName
                }}</span>
              <span class="ml-5" style="margin-bottom: 1px;color: rgba(34,34,34,0.5)">{{
                  article.createTime.split('.')[0].split('T').join(' ')
                }}</span>

            </div>

            <div class="horizontal-line"></div>

            <!--封面-->
            <div v-if="article.cover" style="margin:18px;text-align: center">
              <img style="max-height: 320px;max-width: 100%" :src="article.cover" alt="">
            </div>

            <!--内容-->
            <div class="ck-content" style="letter-spacing: .01em" v-html="article.content"></div>
          </template>
          <milk-loading v-else style="height: 600px;"></milk-loading>
          <!--文章的其他信息-->
          <div class="article-meta mt-20 mb-10 f-y-center">
            <div class="article-tags">
              <!--              <span class="ml-small-tag" v-for="(v,i) in article.tag" :key="i">{{ v }}</span>-->
              <span class="ml-tag text" v-for='(tag,i) in article.tag' :key="i">
                {{ tag }}
              </span>
            </div>
            <div class="article-vc ml-auto">
              <span>
                <i class="far fa-comment-dots"></i>
                {{ article.comments ? article.comments.length : 0 }}
              </span>
              <span class="ml-5">
                <i class="far fa-eye"></i>
                {{ article.viewNum ? article.viewNum : 0 }}
              </span>
            </div>
          </div>

          <div class="article-action">
            <div class="article-action-item none-select-css" @click="handleActionClick">
              <i class="fas fa-heart"></i>
              <span class="ml-10">{{ article.likes }}</span>
            </div>

            <div class="article-action-item">
              <i class="fas fa-share"></i>
              <span class="ml-10">分享</span>
            </div>
          </div>

          <reply-box :articleId="article._id"
                     :parent="article"
                     @afterComment="afterComment"></reply-box>

          <milk-comment :comment="article.comments"
                        :articleId="article._id"
                        :sender="sender"
          ></milk-comment>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import { GetArticle } from '../../api/blog-api'
import { UpdateArticleLikes } from '@/api/blog-api'
import userMixin from '@/views/mixins/userMixin'
import emoji from '@/libs/emoji'
import ReplyBox from '@/views/public-view/replay/replyBox/ReplyBox'

export default {
  name: 'ArticleRead',
  mixins: [userMixin],
  components: { ReplyBox },
  data: () => ({
    emoji,
    emojiTab: '',
    lastSelection: null,
    loading: true,
    article: {},
    showEmoji: false,
    showEmojiTop: true,
    updateLikesTimeout: null
  }),
  watch: {
    $route: {
      handler (val, oldval) {
        if (val.name === 'articleRead') {
          this.loading = true
          this.getArticleDetail(val.params.id)
        }
      },
      // 深度观察监听
      immediate: true
    }
  },
  mounted () {
    if (window.tippy) {
      // this.actions.map(a => {
      //   // console.log(this.$refs[a.name])
      //   window.tippy(this.$refs[a.name], {
      //     content: a.desc,
      //     offset: [0, 4]
      //   })
      // })
    }
  },

  methods: {
    afterComment (e) {
      this.article.comments.unshift(e)
    },

    getArticleDetail (articleId) {
      GetArticle({ _id: articleId, type: 'read' }).then(res => {
        this.article = res.data[0]
        this.$nextTick(() => {
          this.$store.commit('daisy/blog/SendLog', {
            log: {
              userId: this.sender.id,
              userName: this.sender.name,
              status: 'start',
              action: 'read',
              target: 'article',
              targetId: this.article._id
            }
          })
        })
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    },

    handleActionClick (action) {
      if (this.updateLikesTimeout) {
        clearTimeout(this.updateLikesTimeout)
      }
      this.article.likes += 1
      this.updateLikesTimeout = setTimeout(() => {
        if (!this.loading) {
          UpdateArticleLikes({ likes: this.article.likes, _id: this.article._id })
        }
      }, 4000)
    }
  }
}
</script>

<style src="../../../public/ckeditor/content-styles.min.css"></style>
<style src="../../../public/ckeditor/ck.css"></style>

<style>
/*ArticleRead*/
.article-read-out .vue-popover {
  /*background-color: rgba(255, 217, 218, 0.51);*/
}

.article-read-wrapper {
  position: relative;
  width: 100%;
  /*background-color: #f3f6fb;*/
  color: #545454;
  overflow: auto;
}

.article-read {
  width: 100%;
  padding: 20px 40px 40px;
}

/*.ml-small-tag {*/
/*  cursor: pointer;*/
/*  display: inline-block;*/
/*  margin-left: 6px;*/
/*  height: 16px;*/
/*  padding: 0 14px;*/
/*  border-radius: 4px;*/
/*  line-height: 16px;*/
/*  font-size: 12px;*/
/*  background-color: #54b3ea;*/
/*  color: white*/
/*}*/

/*.ml-small-tag:hover {*/
/*  background-color: #53c0ff;*/
/*}*/

.article-read-wrapper .article-container {
  background-color: white;
}

.article-vc {
  color: rgba(34, 34, 34, 0.5);
}

.article-action {
  display: flex;
  justify-content: center;
  padding: 22px 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.article-action-item {
  cursor: pointer;
  font-size: 18px;
  line-height: 46px;
  height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  transition: .35s;
}

.article-action-item:hover {
  background-color: #101356;
  color: #FFFFFF;
}


/*.like-action {*/
/*  color: #ff6d6b;*/
/*  font-size: 14px;*/
/*  font-weight: bold;*/
/*}*/

/*.action-wrapper {*/
/*  display: grid;*/
/*  place-items: center;*/
/*  width: 47px;*/
/*  height: 47px;*/
/*  border-radius: 50%;*/
/*  margin-right: 6px;*/
/*  transition: .15s;*/
/*}*/

/*.action-wrapper > img {*/
/*  width: 85%;*/
/*  height: 85%;*/
/*  transition: .2s;*/
/*  cursor: pointer;*/
/*}*/

/*.action-wrapper.active {*/
/*  background-color: rgba(255, 217, 218, 0.51);*/
/*}*/

/*.action-wrapper.active > img {*/
/*  animation: actionAnimate 0 .9s;*/
/*  animation-iteration-count: infinite;*/
/*}*/

/*@keyframes actionAnimate {*/
/*  !*animate here,0%可以设置动画的初始状态*!*/
/*  0% {*/
/*    transform: scale(1);*/
/*  }*/
/*  10% {*/
/*    transform: scale(1.05);*/
/*  }*/
/*  20% {*/
/*    transform: scale(1.11);*/
/*  }*/
/*  30% {*/
/*    transform: scale(1.18);*/
/*  }*/
/*  40% {*/
/*    transform: scale(1.22);*/
/*  }*/
/*  100% {*/
/*    transform: scale(1);*/
/*  }*/
/*}*/
.article-action-item + .article-action-item {
  margin-left: 25px;
}

@media (min-width: 1200px) {
  .article-read-wrapper {
    display: flex;
  }

  .article-action-item + .article-action-item {
    margin-left: 50px;
  }
}

@media (max-width: 768px) {
  .article-read {
    padding: 14px 10px 30px;
  }
}

</style>
